<template>
  <div class="container-water-fall">
    <waterfall :col="col" :data="data">
      <template>
        <div v-for="(item, index) in data" :key="index" class="cell-item">
          <img :lazy-src="item.fileUrl+'/'+ item.bucket + '/'+ item.fileName" alt="无法加载">
          <div class="item-body">
            <div class="item-footer">
              <div class="item-title">
                {{ item.fileOriginalName }}
              </div>
              <div class="item-del">
                <el-button type="text" icon="el-icon-delete" circle @click="deleteImage(item.fileName)" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>
<script>
export default {
  props: {
    // 图片数据
    data: {
      type: Array,
      default: () => []
    },
    // 定义列数
    col: {
      type: Number,
      default: 8
    }
  },
  methods: {
    deleteImage(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.item-body {
   margin: 5px;
  .item-footer {
    display: flex;
    justify-content: space-between;
    .item-title {
      display: flex;
      align-items: center;
      font-size: 13px;
      line-height: 14px;
      color: rgba(0, 0, 0, 0.6);
    }
    .item-del {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 14px;
      color: rgba(0, 0, 0, 0.4);
    }
  }
}
.cell-item {
  width: 100%;
  margin-bottom: 6px;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>
